<template>
  <el-dialog title="编辑角色" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
    <el-form ref="editForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="角色名称" label-width="100px" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="角色权限" label-width="100px" prop="menus">
        <TreeSelect
          ref="menusTree"
          :data="data"
          multiple
          :checkedKeys="defaultCheckedKeys"
          @popoverHide="popoverHide"
        ></TreeSelect>
      </el-form-item>
      <el-form-item label="排序值" prop="showOrders" label-width="100px">
        <el-input-number v-model="form.showOrders" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="角色描述" label-width="100px">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('editForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import TreeSelect from "@/components/basic-treeselect/treeselect";
import { baseUrl } from "@/config/env";
const urls = {
  save: baseUrl + "/cp/role/au-role/edit",
  list: baseUrl + "/cp/func/au-func/tree",
  get: baseUrl + "/cp/role/au-role/edit_form",
  chose_func: baseUrl + "/cp/role/au-role-func/list"
};
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      defaultCheckedKeys: [],
      parentId:[],
      form: {
        objectId: null,
        name: null,
        description: null,
        menus: null,
        showOrders : null
      },
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        menus: [{ required: true, message: "请选择菜单权限", trigger: "blur" }]
      }
    };
  },
  components: {
    TreeSelect
  },
  methods: {
    popoverHide(checkedIds, checkedData) {
      this.form.menus = checkedIds.toString();
    },
    show(objectId) {
      this.dialogVisible = true;
      if (this.$refs["editForm"]) {
        this.$refs["editForm"].resetFields();
      }
      this.fetch(objectId);
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.menus = this.$refs.menusTree.options.map(item => {
            return item.value;
          });
          this.form.menus = this.form.menus.join(',');
          axios.post(urls.save, this.form).then(res => {
            this.$message(res.data.result);
            this.dialogVisible = false;
            this.$emit("refresh");
          });
        }
        return false;
      });
    },
    fetch(objectId) {
      axios.get(urls.get, { params: { objectId: objectId } }).then(res => {
        let data = res.data.result;
        this.form = {
          objectId: data.objectId,
          name: data.name,
          showOrders : data.showOrders,
          description: data.description
        };
      });
      axios.get(urls.list).then(res => {
        this.data = res.data.result;
        for(var i=0;i<this.data.length;i++){
            this.parentId.push(this.data[i].objectId);
        }
        axios.get(urls.chose_func, { params: { roleId: objectId } }).then(res => {
        var data = res.data.result;
        this.defaultCheckedKeys = data.map(item => {
          if(this.parentId.indexOf(item.funcId)<0){
             return item.funcId;
          }
        })
        this.form.menus = this.defaultCheckedKeys.toString();
      });  
    })
    }
  }
};
</script>
<style scoped>
/deep/.tree-select {
  width: 100%;
}
</style>